<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <title>多媒体</title>
            <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
            <script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
            <script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
      </head>
      <body>
            <div class="container mt-3">
                  <h2>多媒体对象</h2>
                  <p>使用media和media-body类来创建多媒体对象：</p>
                  <!-- 媒体基本样式 -->
                  <div class="media border p-3">
                        <img src="https://wx2.sinaimg.cn/mw690/bf6e696cgy1hsngj1seiej22be15be82.jpg" alt="图片" class="mr-3 mt-3 rounded-circle" style="width: 60px;">
                        <div class="media-body">
                              <h4>媒体标题</h4>
                              <p>媒体内容</p>
                        </div>
                  </div>

                  <!-- 媒体嵌套 -->
                  <div class="media border p-3">
                        <img src="https://wx2.sinaimg.cn/mw690/bf6e696cgy1hsngj1seiej22be15be82.jpg" alt="图片" class="mr-3 mt-3 rounded-circle" style="width: 60px;">
                        <div class="media-body">
                              <h4>媒体标题</h4>
                              <p>媒体内容</p>
                              <div class="media border p-3">
                                    <img src="https://wx2.sinaimg.cn/mw690/bf6e696cgy1hsngj1seiej22be15be82.jpg" alt="图片" class="mr-3 mt-3 rounded-circle" style="width: 60px;">
                                    <div class="media-body">
                                          <h4>媒体标题</h4>
                                          <p>媒体内容</p>
                                    </div>
                              </div>
                        </div>
                  </div>

                  <!-- 图片显示在右边 -->
                  <div class="media border p-3">
                        <div class="media-body">
                              <h4>媒体标题</h4>
                              <p>媒体内容</p>
                        </div>
                        <img src="https://wx2.sinaimg.cn/mw690/bf6e696cgy1hsngj1seiej22be15be82.jpg" alt="图片" class="ml-3 mt-3 rounded-circle" style="width: 60px;">
                  </div>

                  <!-- 定位多媒体图片的位置 -->
                  <div class="media border p-3">
                        <img src="https://wx2.sinaimg.cn/mw690/bf6e696cgy1hsngj1seiej22be15be82.jpg" alt="图片" class="align-self-start mr-3" style="width: 60px;">
                        <div class="media-body">
                              <h4>媒体标题</h4>
                              <p>媒体内容</p>
                        </div>
                  </div>

                  <div class="media border p-3">
                        <img src="https://wx2.sinaimg.cn/mw690/bf6e696cgy1hsngj1seiej22be15be82.jpg" alt="图片" class="align-self-center mr-3" style="width: 60px;">
                        <div class="media-body">
                              <h4>媒体标题</h4>
                              <p>媒体内容</p>
                        </div>
                  </div>

                  <div class="media border p-3">
                        <img src="https://wx2.sinaimg.cn/mw690/bf6e696cgy1hsngj1seiej22be15be82.jpg" alt="图片" class="align-self-end mr-3" style="width: 60px;">
                        <div class="media-body">
                              <h4>媒体标题</h4>
                              <p>媒体内容</p>
                        </div>
                  </div>
            </div>
      </body>
</html>